.product{ width:100%; min-width:1320px; background-color:#ddd7db; padding:60px 0;}

.quanjiafu{ width:100%; max-width:1320px; height:400px; margin:auto; background:url(../images/quanjiafu.png) no-repeat center top; background-size:100%; position:relative; font-size:14px; line-height:22px;}

.redian{ width:50px; height:50px; overflow:hidden; position:absolute;transition:0.3s;}
.redian img{ width:32px;}

.cptp{vertical-align:text-top; width:50px;}
.redian2{ width:0px; height:50px; overflow:hidden;padding-right:40px;position:absolute;background:url(../images/dian.png) top right no-repeat; background-size:30px;transition:0.3s;}

.d{
    background: #c4d700 none repeat scroll 0 0;
    border-radius: 50%; width:40px; height:40px;
    position: absolute; top:0; left:0;
}
.d2{
    background: #c4d700 none repeat scroll 0 0;
    border-radius: 50%; width:40px; height:40px;
    position: absolute; top:0; right:0;
}
.dian i{ width:40px; height:40px; position:absolute; left:0; top:0; text-align:center; line-height:40px; font-size:40px; font-style:normal; color:#FFFFFF; font-family:Arial, Helvetica, sans-serif;}
.dian2 i{ width:40px; height:40px; position:absolute; right:0; top:0; text-align:center; line-height:40px; font-size:40px; font-style:normal; color:#FFFFFF; font-family:Arial, Helvetica, sans-serif;}


.redian:hover{ width:315px; height:140px; z-index:999;transition:0.3s;cursor:crosshair;}
.tab:hover{ cursor:crosshair;}

.dingwei1{ top:190px; left:160px;}
.dingwei2{ top:240px; left:40%;}
.dingwei3{ top:120px; left:23%;}
.dingwei4{ top:185px; right:7%;}
.dingwei5{ top:225px; left:63%;}


.cpjs{ width:255px; box-sizing:border-box; background-color:rgba(1, 34, 49,0.8); padding:20px;transition:0.3s;opacity:0; color:#c4d700;border-radius: 5px;}
.cpjs2{ width:260px; box-sizing:border-box; float:right; background-color:rgba(1, 34, 49,0.8); padding:20px;transition:0.3s;opacity:0; color:#c4d700;border-radius: 5px;}

.redian:hover .cpjs{transition:0.3s;opacity:1;}
.tab:hover .cpjs2{transition:0.3s;opacity:1;}

.tab{width:50px; height:50px; overflow:hidden; position:absolute; display:block}
.tab:hover{ width:350px; height:auto;}
.hxdian{ width:50px; height:50px; float:right; text-align:center;}
.hxdian img{ width:32px;}
.cpjs2{ float:right; width:240px;}
/*ipad*/
@media screen and (max-width:1100px) {
.quanjiafu{ width:100%; height:320px;}
.dingwei1{ top:190px; left:160px;}
.dingwei2{ top:180px; left:40%;}
.dingwei3{ top:80px; left:23%;}
.dingwei4{ top:155px; right:7%;}
.dingwei5{ top:190px; left:63%;}
}
@media screen and (max-width:900px) {
.quanjiafu{ width:100%; height:230px;background:url(../images/quanjiafu.png) no-repeat center center;background-size:100%;}
.redian,.tab{ display:none;}

.d{
    background: #c4d700 none repeat scroll 0 0;
    border-radius: 50%; width:30px; height:30px;
    position: absolute; top:0; left:0;
}
.d2{
    background: #c4d700 none repeat scroll 0 0;
    border-radius: 50%; width:30px; height:30px;
    position: absolute; top:0; right:0;
}
.dian i{ width:30px; height:30px; position:absolute; left:0; top:0; text-align:center; line-height:30px; font-size:40px; font-style:normal; color:#FFFFFF; font-family:Arial, Helvetica, sans-serif;}
.dian2 i{ width:30px; height:30px; position:absolute; right:0; top:0; text-align:center; line-height:30px; font-size:40px; font-style:normal; color:#FFFFFF; font-family:Arial, Helvetica, sans-serif;}
}

/*手机*/
@media screen and (max-width: 640px) {
.quanjiafu{ width:100%; height:170px;background:url(../images/quanjiafu.png) no-repeat center center;background-size:100%;}
.redian,.tab{ display:none;}
}